<!-- created:2022/12/11 11:13 By AdinZ -->
<template>
  <div class="setting layout-setting flex">
    <el-scrollbar :height="tabHeight">
      <el-tabs type="card" v-model:value="activeName" :addable="isDevelopment" stretch tab-position="left"
               style="height: 100%" @tab-change="handlerItemChange" @tab-add="dialogTabAdd=true">
        <el-tab-pane v-for="item in groups" :key="item.groupKey" :name="item.groupKey">
          <template #label>
            <div class="tabs__item" :class="item.groupKey">{{ item.groupName }}</div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </el-scrollbar>
    <el-card class="flex1">
      <el-scrollbar :height="tabHeight-50">
        <el-auto-resizer>
          <div class="table-header-buttons" style="padding-bottom: 15px;" v-if="isDevelopment">
            <el-button type="primary" icon="Edit" circle size="small" @click="editConfig=true"/>
            <el-button type="success" icon="Plus" circle size="small"
                       @click="configs.push({key:'',type:'',groupKey:activeName,key:'',value:'',label:'',remark:'',sort:'',hidden:0})"/>
          </div>
          <el-table :data="configs" border fit highlight-current-row>
            <el-table-column align="center" label="#" width="75">
              <template #default="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column v-if="editConfig" align="center" label="类型" width="150">
              <template #default="scope">
                <el-input v-model="scope.row.key" placeholder="必须是字母+数组组成"/>
              </template>
            </el-table-column>
            <el-table-column v-if="editConfig" align="center" label="数据类型" width="150">
              <template #default="scope">
                <el-select v-model="scope.row.type">
                  <el-option value="ARRAY" label="数组"/>
                  <el-option value="STRING" label="字符串"/>
                  <el-option value="PASSWORD" label="密码"/>
                  <el-option value="INTEGER" label="数字"/>
                  <el-option value="FLOAT" label="小数"/>
                  <el-option value="BOOLEAN" label="布尔"/>
                  <el-option value="TEXTAREA" label="多行文本"/>
                  <el-option value="HTML" label="富文本"/>
                  <el-option value="JSON" label="JSON"/>
                  <el-option value="FILE" label="文件"/>
                  <el-option value="IMAGE" label="图片"/>
                  <el-option value="VIDEO" label="视频"/>
                  <el-option value="TIME_SELECT" label="时分秒"/>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center" label="名称" width="150">
              <template #default="scope">
                <el-input v-if="editConfig" v-model="scope.row.label"/>
                <span v-else>{{ scope.row.label }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="参数">
              <template #default="scope">
                <el-input v-if="editConfig" type="textarea" :rows="4" placeholder="json 请输入完整的json"
                          v-model="scope.row.value"/>
                <div v-else>
                  <el-switch v-if="scope.row.type == 'BOOLEAN'" v-model="scope.row.value" :active-value="'true'"
                             :inactive-value="'false'"/>
                  <el-input v-else-if="scope.row.type == 'INTEGER' || scope.row.type == 'FLOAT'"
                            v-model="scope.row.value"
                            :type="scope.row.type == 'INTEGER' || scope.row.type == 'FLOAT' ? 'number' : 'text'"/>
                  <el-input v-else-if="scope.row.type == 'TEXTAREA'" v-model="scope.row.value" type="textarea"/>
                  <el-input v-else-if="scope.row.type == 'PASSWORD'" v-model="scope.row.value" type="password"/>
                  <div v-else-if="scope.row.type==='TIME_SELECT'">
                    <el-time-picker v-model="scope.row.value" placeholder="时间范围" value-format="HH:mm:ss"
                                    format="HH:mm:ss"></el-time-picker>
                  </div>
                  <div v-else-if="scope.row.type=='IMAGE'||scope.row.type=='FILE'">
                    <el-input type="text" v-model="scope.row.value">
                      <template #append>
                        <el-button
                            @click="()=>$store.dispatch('upload/show',(e)=>{scope.row.value=e[0].src})">上传
                        </el-button>
                      </template>
                    </el-input>
                  </div>
                  <div class="value-html" v-else-if="scope.row.type=='HTML'" style="height: 400px">
                    <ckeditor :editor="editor" v-model="scope.row.value" :config="editorConfig"></ckeditor>
                  </div>
                  <el-input v-else v-model="scope.row.value"/>
                </div>

              </template>
            </el-table-column>
            <el-table-column align="center" label="备注" width="200">
              <template #default="scope">
                <el-input v-if="editConfig" v-model="scope.row.remark"/>
                <div v-else>
                  <div v-if="scope.row.remark"
                       v-html="scope.row.remark"></div>
                </div>
              </template>
            </el-table-column>
            <el-table-column v-if="editConfig" align="center" label="排序" width="120">
              <template #default="scope">
                <el-input v-model="scope.row.sort" placeholder="数字越大越靠前" type="number"/>
              </template>
            </el-table-column>
            <el-table-column v-if="editConfig" align="center" label="隐藏" width="120">
              <template #default="scope">
                <el-select v-model="scope.row.hidden">
                  <el-option label="不隐藏" :value="0"/>
                  <el-option label="隐藏" :value="1"/>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column v-if="editConfig" align="center" label="删除" width="80">
              <template #default="scope">
                <el-button circle icon="Delete" size="small" type="danger"
                           @click="configs=$api.deleteArray(configs,scope.$index)"/>
              </template>
            </el-table-column>
          </el-table>
          <div style="padding: 20px ;text-align: center">
            <el-button type="primary" @click="handleSubmit">保存</el-button>
          </div>
        </el-auto-resizer>
      </el-scrollbar>
    </el-card>


    <el-dialog v-model="dialogTabAdd" title="添加新的分组" width="400px" @close="form={}">
      <el-form label-width="80px">
        <el-form-item label="分组类型">
          <el-input v-model="form.groupKey" type="text" placeholder="必须为字母,全局唯一值"/>
        </el-form-item>
        <el-form-item label="分组名">
          <el-input v-model="form.name" type="text" placeholder="请输入名称"/>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogTabAdd=false">取消</el-button>
          <el-button type="primary" @click="handleSubmitTab()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>
<script setup>


</script>
<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn';

export default {
  name: "setting",
  data() {
    return {
      groups: [],
      configs: [],
      activeName: '',
      dialogTabAdd: false,
      form: {},
      editConfig: false,
      editor: ClassicEditor,
      editorConfig: {
        // The configuration of the editor.
        height: '300',
        language: 'zh-cn',
        toolbar: {
          items: [
            'heading',
            'font',
            'highlight',
            '|',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            '|',
            'outdent',
            'indent',
            '|',
            'blockQuote',
            'insertTable',
            'mediaEmbed',
            'undo',
            'redo',
            'ckbox',
          ],
        },
        image: {
          toolbar: [
            'imageTextAlternative',
            'toggleImageCaption',
            'imageStyle:inline',
            'imageStyle:block',
            'imageStyle:side'
          ]
        },
        table: {
          contentToolbar: [
            'tableColumn',
            'tableRow',
            'mergeTableCells'
          ]
        },
        fontSize: {
          options: [8, 9, 10, 11, 12, 'default', 14, 16, 18, 20, 22, 24, 26, 28, 36, 44, 48, 72],
        },
      }
    }
  },
  computed: {
    tabHeight() {
      return this.$store.state.app.windowSize.height - 30;
    },
    isDevelopment() {
      return process.env.NODE_ENV === 'development';
    }
  },
  created() {
    this.getGroupList()

  },
  methods: {
    getGroupList() {
      this.$api.get('/api/manage/config/group/list').then((res) => {
        this.groups = res.data
        if (this.groups && this.groups.length > 0) {
          this.activeName = this.groups[0].groupKey
          this.getConfigList()
        }
        this.groups.push({groupKey: 'clear-cache', groupName: '清理缓存'})
      })
    },
    getConfigList() {
      this.configs = []
      this.$api.get('/api/manage/system/config/list', {type: this.activeName}).then((res) => {
        this.configs = res.data
      })
    },
    handlerItemChange(item) {
      if (item == 'clear-cache') {
        this.$api.confirm('确定要清理全局系统配置缓存吗?').then(() => {
          this.$api.get('/api/manage/system/config/clean').then(() => {
            this.$api.message('清除成功');
          })
        })
        return
      }
      this.activeName = item
      this.getConfigList();
    },
    handleSubmit() {
      let keys = Object.keys(this.$refs);
      for (let i = 0; i < keys.length; i++) {
        let key = keys[i];
        if (key.startsWith('configJson_') && this.$refs[key] && this.$refs[key].handlerUpdate) {
          this.$refs[key].handlerUpdate();
        }
      }
      console.log('提交保存',)
      let arr = JSON.parse(JSON.stringify(this.configs))
      for (let i = 0; i < arr.length; i++) {
        delete arr[i]['objectValue']
      }
      this.$api.post('/api/manage/system/config/post', {type: this.activeName}, {data: arr}).then(() => {
        this.$api.message('更新成功')
      })
    },
    handleSubmitTab() {
      this.$api.post('/api/manage/create-group', {}, this.form).then(() => {
        this.getGroupList()
        this.dialogTabAdd = false;
      })
    },

    test() {
      this.$store.dispatch('upload/show', (src) => {
        console.log('图片上传回调成功', src)
      })
    }
  }
}
</script>
<style>
.ck-editor {
}


</style>
<style scoped lang="scss">
.setting {
  .el-tabs__item {
    height: 90px;
  }

  .tabs__item {
    padding: 10px 15px !important;
    width: 150px !important;
  }

  .clear-cache {
    color: var(--el-color-danger);
  }
}
</style>
